<template>
  <el-drawer v-model="visible" title="挂号单详情" direction="ltr" size="900">
    <div class="flex flex-col gap-6">
      <el-descriptions title="挂号单信息" border label-width="80" :column="4">
        <el-descriptions-item label="挂号单号" :span="2">{{ data?.clinicNo }}</el-descriptions-item>
        <el-descriptions-item label="状态" :span="2">
          <el-tag v-if="data?.status === 0" type="success">正常</el-tag>
          <el-tag v-else-if="data?.status === 1" type="danger">退号</el-tag>
          <el-tag v-else-if="data?.status === 2" type="warning">就诊</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="患者姓名">{{ data?.name }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ data?.sex }}</el-descriptions-item>
        <el-descriptions-item label="院内ID">{{ data?.patientId }}</el-descriptions-item>
        <el-descriptions-item label="院内ID">{{ data?.chargeType }}</el-descriptions-item>
        <el-descriptions-item label="就诊日期">{{ data?.visitDate }}</el-descriptions-item>
        <el-descriptions-item label="时间描述">{{ data?.timeDesc }}</el-descriptions-item>
        <el-descriptions-item label="医生">{{ data?.doctorName }}</el-descriptions-item>
        <el-descriptions-item label="科室">{{ data?.deptName }}</el-descriptions-item>
        <el-descriptions-item label="号类" :span="4">{{ data?.clinicType }}</el-descriptions-item>
        <el-descriptions-item label="金额">{{ data?.clinicCharge }}</el-descriptions-item>
        <el-descriptions-item label="挂号金额">{{ data?.registFee }}</el-descriptions-item>
        <el-descriptions-item label="诊疗费">{{ data?.clinicFee }}</el-descriptions-item>
        <el-descriptions-item label="其它费">{{ data?.otherFee }}</el-descriptions-item>
        <el-descriptions-item label="收款时间">{{ data?.payDate }}</el-descriptions-item>
        <el-descriptions-item label="收款员">{{ data?.payOperatorName }}</el-descriptions-item>
        <el-descriptions-item label="退款时间">{{ data?.refundDate }}</el-descriptions-item>
        <el-descriptions-item label="退款员">{{ data?.refundOperatorName }}</el-descriptions-item>
      </el-descriptions>

      <el-card>
        <template #header>
          <div class="card-header">
            <span>支付详情</span>
          </div>
        </template>
        <el-table border stripe :data="data?.payments">
          <el-table-column label="序号" type="index" width="70" />
          <el-table-column label="支付方式" prop="payWay" />
          <el-table-column label="支付金额" prop="payMoney" />
          <el-table-column label="退款金额" prop="refundMoney" />
        </el-table>
      </el-card>
    </div>
    <template #footer>
      <el-button :disabled="data?.status !== 0" @click="confirmRefund">退款</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import type { RegisterPayRecRes } from '@/api/register'
import { RegisterBusAPIs } from '@/api/register'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const clinicNo = ref('')
const data = ref<RegisterPayRecRes | undefined>(undefined)
/**显示 */
function display(cNo: string) {
  clinicNo.value = cNo
  visible.value = true

  query()
}

/**查询数据 */
async function query() {
  data.value = await RegisterBusAPIs.getRegisterRecByClinicNo(clinicNo.value)
}

/**退款 */
function confirmRefund() {
  ElMessage.success('退款成功')
  query()
}
defineExpose({
  display,
})
</script>

<style lang="scss"></style>
